<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/denglu.css">
    <script type="text/javascript">
    function onChange() {
        var div1 = document.getElementById("id1");
        var div2 = document.getElementById("id2");
        if(div1.style.display == "block") 
           div1.style.display = "none";
        else
           div1.style.display = "block";

        if(div2.style.display == "block") 
           div2.style.display = "none";
        else
           div2.style.display = "block";
    }
    </script>
</head>
<body>
    <div class="nav-bar">
        <img src="./img/top.png" alt="">
    </div>
    <div class="mid-bar">
        <a href="https://www.kaola.com"><button style="background: url(./img/kaola.png);" ></button></a>
        <p>正</p>
        <span>正品保障</span>
        <h6><br>正品保障&nbsp;&nbsp;假一赔十</h6>
        <img src="./img/plane.png" alt="">
        <h5>100%全球精选</h5><br>
        <h4>全球尖货&nbsp;&nbsp;产地直采</h4>
        <div class="last">
            <img src="./img/back.png" alt="">
            <span>30天无忧退货<br>国内退货&nbsp;&nbsp;售后无忧</span>
        </div>
    </div>
    <div class="bor"></div>
    <div class="nav-bot" id="id1" style="display: block;">
        <img src="./img/original.png" alt="" 
             style="padding-left: 200px; padding-top: 200px;">
        <div class="land">
        <form action="index.html">
            <h4>手机号登录</h4>
            <input type="text" name="" id="" 
                   class="usename"
                   placeholder="请输入手机号" 
                   style="height: 40px;width: 300px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;border:1px gainsboro solid">
            <br><br>
            <input type="text" name="" id="" placeholder="请输入验证码"
                   value=""
                   class="password"
                   style="height: 40px; width: 300px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;border:1px gainsboro solid">
                   <br><br>
            <input type="submit" value="登录" style="color:white;height: 40px; width: 300px; border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;border:1px gainsboro solid;background: #ff3234;font-size: 18px;">
            <h5>注册/登录页面代表<a href="">隐私政策</a>和<a href="">服务条款</a></h5>
            <div calss="difTo">
                <ul>
                    <li><img src="./img/taoBao.png" alt=""></button></li>
                    <li><img src="./img/pay.png" alt=""></li>
                    <li><img src="./img/weChat.png" alt=""></li>
                    <li><img src="./img/weiBo.png" alt=""></li>
                    <li><img src="./img/email.png" alt=""></li>
                </ul>
            </div>
        </form>
        </div>
        <div id = "wxL"></div>
    </div>
    <div class="nav-bot-or" id="id2" style="display: none;">
        <div>
            <p>扫码登录</p>
            <img src="./img/original.png" alt="" 
                style="padding-left: 200px; padding-top: 200px;"
                id="orImg"> 
            <img src="./img/erWeiMa.png" alt="" id="erWei">
        </div>
    </div>
    <input id="toChange" type="button" onclick="onChange()" value="切换登录">
    <div class="nav-cannel">
        <img src="./img/nav-bto.png" alt="">
    </div>
</body>
</html>